<template>
  <div class="autoRepayment">
    <van-nav-bar
      title="自动还款"
    />
    <div class="content-box">
      <div class="content">
        <img
          src="https://cdn.nbcb.com.cn/creditcard/cbp/formatimage/0113Wa.jpg"
          alt=""
          class="top-img"
        />
        <div class="title">饿了么白金卡(1102)</div>
        <div class="content-card">
          <div>自动还款</div>
          <div><van-switch v-model="checked" size="14px" /></div>
        </div>
        <div class="content-card">
          <div>还款账户</div>
          <div>招商银行储蓄卡(1102)</div>
        </div>
        <div class="content-card">
          <div>还款方式</div>
          <div>全额还款</div>
        </div>
        <div class="content-card">
          <div>还款币种</div>
          <div>人民币</div>
        </div>
      </div>
      <div class="tips">
        <div class="tips-top">温馨提示：</div>
        <div class="tips-content">
          <p>1.不支持使用他行卡自动还款</p>
          <p>2.在本次到期还款日前一天24:00前设置，本次还款日即可执行自动扣款;若在还款日后设置，则下一个还款日生效。如您选择最低还款额方式还款，将不再享受免息还款期待遇。</p>
          <p>3.自动还款设置成功后，我行将于到期还款日次日从您的关联还款账户扣款(请确保到期还款日当天晚上9点之前关联借记卡账户资金充足)</p>
          <p>4.若您绑定的自动扣款借记卡卡号有变更，自动还款关系不会自动调整，需在此页选择新卡号重新绑定。</p>
          <p>5.若您的付款账号开通了理财宝功能，还款时将优先从该账号的活期余额扣款，活期余额不足的部分，将会自动从您的理财宝余额中扣款。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "autoRepayment",
  components: {},
  data() {
    return {
      checked: true,
      tips: `1.不支持使用他行卡自动还款。\n2.在本次到期还款日前一天24:00前设置，本次还款日即可执行自动扣款;若在还款日后设置，则下一个还款日生效。如您选择最低还款额方式还款，将不再享受免息还款期待遇。\n3.自动还款设置成功后，我行将于到期还款日次日从您的关联还款账户扣款(请确保到期还款日当天晚上9点之前关联借记卡账户资金充足)\n4.若您绑定的自动扣款借记卡卡号有变更，自动还款关系不会自动调整，需在此页选择新卡号重新绑定。\n5.若您的付款账号开通了理财宝功能，还款时将优先从该账号的活期余额扣款，活期余额不足的部分，将会自动从您的理财宝余额中扣款。`,
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
  },
};
</script>

<style scoped lang="less">
.content-box {
  padding-top: 15px;
  background: #eee;
  height: 100%;
}
.content {
  width: 94%;
  margin: 0 auto;
  background: white;
  text-align: center;
  border-radius: 5px;
}
.top-img {
  margin-top: 15px;
  width: 96%;
  height: 180px;
}
.title {
  height: 10px;
  line-height: 10px;
  font-size: 16px;
  text-align: left;
  padding: 0 10px;
  margin: 10px 0;
  color: #1f1f1f;
  font-weight: 700;
}
.content-card {
  padding: 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  color: #9d9292;
}
.tips {
  width: 94%;
  margin: 0 auto;
  padding-bottom: 20px;
}
.tips-top {
  font-size: 14px;
  margin-top: 10px;
  color: #999;
  margin-bottom: 10px;
}
.tips-content {
  font-size: 12px;
  white-space: pre-wrap;
  color: #999;
  p{
    line-height: 1.5em;
    margin: 0;
  }
}
</style>
